<template>
  <div>
    <a-input-search
      allowClear
      placeholder="请输入课程名称"
      style="width: 224px; margin-top: 16px;"
      @search="onSearch"
    />

    <div class="text-center mt20" v-if="loading">
      <a-spin />
    </div>

    <template v-else>
      <list-item
        v-for="question in questionList"
        :key="question.id"
        :question="question"
      />
    </template>

    <empty v-if="!loading && !questionList.length" />

    <a-pagination
      class="text-center"
      style="margin-top: 16px;"
      :hide-on-single-page="true"
      v-model="pagination.current"
      :total="pagination.total"
      @change="onChange"
    />
  </div>
</template>

<script>
import { Me } from 'common/vue/service/index.js';
import ListItem from './ListItem.vue';
import Empty from 'app/vue/views/components/Empty.vue';

export default {
  components: {
    ListItem,
    Empty
  },

  data() {
    return {
      loading: false,
      pagination: {
        current: 1
      },
      keyWord: '',
      questionList: []
    }
  },

  created() {
    this.fetchWrongBooksCertainTypes();
  },

  methods: {
    onSearch(value) {
      this.keyWord = value;
      this.pagination.current = 1;
      this.fetchWrongBooksCertainTypes();
    },

    onChange(current) {
      this.fetchWrongBooksCertainTypes();
    },

    async fetchWrongBooksCertainTypes() {
      this.loading = true;

      const { data, paging } = await Me.getWrongBooksCertainTypes({
        targetType: 'course',
        keyWord: this.keyWord,
        offset: (this.pagination.current - 1) * 10
      });

      this.pagination.total = Number(paging.total);
      this.loading = false;
      this.questionList = data;
    }
  }
}
</script>
